{% extends "UiManager/base.html" %}
{% block title %}元素管理{% endblock %}
{% block new %}
    <button class="btn btn-danger btn-sm fa fa-plus" style="border-radius: 20px" data-toggle="modal" data-target="#newProject">&nbsp;新建元素</button>
{% endblock %}
{% block location %}
    <div class="am-icon-home fa fa-home" style="font-weight: bold;color: grey; float: right;">&nbsp;当前位置： 元素管理 > 元素列表</div>
{% endblock %}
{% load staticfiles %}
{% block css %}
{% endblock %}
{% block js %}
    <script>

    //新建中所属项目联动
    $("#newSel1").on('change', function () {
        var newNum = $("#newSel1 option:selected").val();//所属项目
        $("#newpage1").find('option').remove();
        $("#newpage1").append('<option value="none">所属页面</option>');
        var datas = {
            "project_id": newNum
        }
        var data = JSON.stringify(datas);
        $.ajax({
            url: '/ui/get_page_by_project/',
            type: 'post',
            dataType: 'json',
            data: data,
            success: function (res) {
                for (var i = 0; i < res.content.length; i++) {
                    $("#newpage1").append('<option value="' + res.content[i]["id"]+ '">' + res.content[i]["page_name"] + '</option>');
                }

            }
        });
    });
    //编辑中所属项目联动
    $("#edit_project_name").on('change', function () {
        var newNum = $("#edit_project_name option:selected").val();//所属项目
        $("#edit_page_name").find('option').remove();
        $("#edit_page_name").append('<option value="none">所属页面</option>');
        var datas = {
            "project_id": newNum
        };
        var data = JSON.stringify(datas);
        $.ajax({
            url: '/ui/get_page_by_project/',
            type: 'post',
            dataType: 'json',
            data: data,
            success: function (res) {
                for (var i = 0; i < res.content.length; i++) {
                    $("#edit_page_name").append('<option value="' + res.content[i]["id"]+ '">' + res.content[i]["page_name"] + '</option>');
                }

            }
        });
    });
    // 页面刷新后加载项目页面
    window.onload=function(){
        var newNum = $("#select_project_name option:selected").val();//所属项目
        $("#select_page_name").find('option').remove();
        $("#select_page_name").append('<option value="0">全部页面</option>');
        var datas = {
            "project_id": newNum
        };
        var data = JSON.stringify(datas);
        $.ajax({
            url: '/ui/get_page_by_project/',
            type: 'post',
            dataType: 'json',
            data: data,
            success: function (res) {
                for (var i = 0; i < res.content.length; i++) {
                    $("#select_page_name").append('<option value="' + res.content[i]["id"]+ '">' + res.content[i]["page_name"] + '</option>');
                }
                $('#select_page_name').selectpicker('refresh');
                $('#select_page_name').selectpicker('render');
            }
        });
    };
    //搜索中所属项目联动
    $("#select_project_name").on('changed.bs.select', function () {
        var newNum = $("#select_project_name option:selected").val();//所属项目
        $("#select_page_name").find('option').remove();
        $("#select_page_name").append('<option value="0">全部页面</option>');
        var datas = {
            "project_id": newNum
        };
        var data = JSON.stringify(datas);
        $.ajax({
            url: '/ui/get_page_by_project/',
            type: 'post',
            dataType: 'json',
            data: data,
            success: function (res) {
                for (var i = 0; i < res.content.length; i++) {
                    $("#select_page_name").append('<option value="' + res.content[i]["id"]+ '">' + res.content[i]["page_name"] + '</option>');
                }
                $('#select_page_name').selectpicker('refresh');
                $('#select_page_name').selectpicker('render');
            }
        });
    });
    /*新建方法*/
    function NewList() {
        var newName, newpage1, newBy, newLocator, newRemark;
        newName = $("#newName").val();                       //元素名称
        newpage1 = $("#newpage1 option:selected").val();//所属页面名称
        newBy = $("#newBy option:selected").val();   //定位类型
        newLocator = $("#newLocator").val();                 //元素文本
        newRemark = $("#newRemark").val();                   //备注信息
        var datas = {
            "type": "add",
            "element_name": newName,               //元素名称
            "belong_page": newpage1,            //所属页面名称
            "belong_location": newBy,                   //定位类型
            "element_value": newLocator,         //元素值
            "simple_desc": newRemark,           //备注信息
        };
        var data = JSON.stringify(datas);
        $.ajax({
            url: '/ui/add_element/',
            type: 'post',
            contentType: 'application/json',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    //重新获取下列表
                    location.reload();
                    //取消方法
                    closeDown()
                } else {
                    $(".js_message").html(res.message);
                }
            }
        });
    }

    /*新建弹窗取消*/
    function closeDown() {
        $('#newProject').modal('hide');
        $(".js_message").html("");
        $("#newName").val("");
        $("#newSel1 option:first").prop("selected", 'selected');
        $("#newpage1").find('option').remove();
        $("#newpage1").append('<option value="none">所属页面</option>');
        $("#newBy option:first").prop("selected", 'selected');
        $("#newLocator").val("");
        $("#newRemark").val("");
        $('#delMessage').html("");
        $('#deleteObj').modal('hide');

    }

    /*编辑页面*/
    function edit(id) {
        $('#edit_element').modal('show');
        var data = {
            id: id,
            type: 'edit'
        };
        $.ajax({
            url: '/ui/edit_element/',
            type: 'post',
            data: JSON.stringify(data),
            dataType: 'json',
            success: function (res) {
                $("#element_name").val(res.element_name);        //元素名称
                $("#edit_project_name").val(res.belong_project_id);
                $("#edit_page_name").find('option').remove();
                $("#edit_page_name").append('<option value="none">所属页面</option>');
                $("#location_type").val(res.belong_location);
                var datas = {
                    "project_id": res.belong_project_id
                };
                var data = JSON.stringify(datas);
                $.ajax({
                    url: '/ui/get_page_by_project/',
                    type: 'post',
                    dataType: 'json',
                    data: data,
                    success: function (res1) {
                        for (var i = 0; i < res1.content.length; i++) {
                            $("#edit_page_name").append('<option value="' + res1.content[i]["id"]+ '">' + res1.content[i]["page_name"] + '</option>');
                            $("#edit_page_name").val(res.belong_page_id);
                        }

                    }
                });

                $("#simple_desc").val(res.simple_desc);
                $("#element_value").val(res.element_value);
                $("#edit-save").attr("onclick", "editSave(" + id + ")");
            }
        });
    }

    function editSave(id) {
        var ele_name, simple_desc, belong_page, location_type, element_value;
        ele_name = $("#element_name").val();
        belong_page = $("#edit_page_name").val();
        simple_desc = $("#simple_desc").val();
        location_type = $("#location_type").val();
        element_value = $("#element_value").val();
        var datas = {
            "id": id,
            "type": "edit_save",
            "element_name": ele_name,               //元素名称
            "belong_page": belong_page,            //所属页面名称
            "belong_location": location_type,     //定位类型
            "element_value": element_value,         //元素值
            "simple_desc": simple_desc,             //备注信息
        };
        var data = JSON.stringify(datas);
        $.ajax({
            url: '/ui/edit_element/',
            type: 'post',
            contentType: 'application/json',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    $("#edit_element").modal("hide");
                    location.reload();
                } else {
                    $(".js_BJmessage").html(res.message);
                }
            }
        });
    }

    /*删除询问方法*/
    function isDel(id) {
        $("#delButton").attr("onclick", "del(" + id + ")");
        $("#deleteObj").modal("show");
    }

    /*删除方法*/
    function del(id) {
        var data = {
          "id": id,
          "type": "delete"
        };
        $.ajax({
            url: '/ui/edit_element/',
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data:JSON.stringify(data),
            success: function (res) {
                if (res.code == 0) {
                    $("#deleteObj").modal("hide");
                    location.reload();
                } else {
                    $("#delMessage").html(res.message);
                }
            }
        });
    }
</script>
{% endblock %}
{% block content %}
    <div id="page-inner">
            <!-- /. 表格  -->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body" style="min-height:500px">
                            <div class="row mar-bottom-20">
                                <div class="form-inline">
                                    <form id="pro_filter" method="POST" action="/ui/element_list/">
                                        <div class="col-lg-12">
                                            <div class="input-group">
                                                <select id="select_project_name" class="selectpicker" data-style="btn-danger" name="select_project_name">
                                                    <option value="0">全部项目</option>
                                                    {% for project in project_list %}
                                                        {% if  project.id == select_project_name %}
                                                            <option value="{{ project.id }}" selected="selected">{{ project.project_name }}</option>
                                                        {% else %}
                                                            <option value="{{ project.id }}">{{ project.project_name }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <select id="select_page_name" class="selectpicker" data-style="btn-default" name="select_page_name">
                                                    <option value="0">全部页面</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                              <input name="search_element_name" type="text" class="form-control" placeholder="元素名称" value="{{ search_element_name }}">
                                                <span class="input-group-btn">
                                                <button class="btn btn-primary" type="submit">搜索</button>
                                              </span>
                                            </div><!-- /input-group -->
                                        </div><!-- /.col-lg-12 -->
                                    </form>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>元素名称</th>
                                        <th>所属项目</th>
                                        <th>所属页面</th>
                                        <th>定位类型</th>
                                        <th>元素文本</th>
                                        <th>描述信息</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody class="js_table">
                                    {% for row in obj %}
                                        <tr>
                                        <td>{{ row.id }}</td>
                                        <td>{{ row.element_name }}</td>
                                        <td>{{ row.belong_page.belong_project.project_name }}</td>
                                        <td>{{ row.belong_page.page_name }}</td>
                                        <td>{{ row.belong_location.location_type }}</td>
                                        <td>{{ row.element_value }}</td>
                                        <td>{{ row.simple_desc }}</td>
                                        <td>
                                            <button class="btn-primary" onclick='edit("{{ row.id }}")'>编辑</button>
                                            <button class="btn-danger" onclick="isDel('{{ row.id }}')">删除</button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <ul class="pagination" id="pager">
                                {#上一页按钮开始#}
                                {# 如果当前页有上一页#}
                                {% if obj.has_previous %}
                                    {#  当前页的上一页按钮正常使用#}
                                    <li class="previous"><a href="/ui/element_list?page={{ obj.previous_page_number }}">&laquo;</a></li>
                                {% else %}
                                    {# 当前页的不存在上一页时,上一页的按钮不可用#}
                                    <li class="previous disabled"><a href="#">&laquo;</a></li>
                                {% endif %}
                                {#上一页按钮结束#}
                                {# 页码开始#}
                                {% for num in paginator.page_range %}

                                    {% if num == currentPage %}
                                        <li class="item active"><a href="/ui/element_list?page={{ num }}">{{ num }}</a></li>
                                    {% else %}
                                        <li class="item"><a href="/ui/element_list?page={{ num }}">{{ num }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {#页码结束#}
                                {# 下一页按钮开始#}
                                {% if obj.has_next %}
                                    <li class="next"><a href="/ui/element_list?page={{ obj.next_page_number }}">&raquo;</a></li>
                                {% else %}
                                    <li class="next disabled"><a href="#">&raquo;</a></li>
                                {% endif %}
                                {# 下一页按钮结束#}
                            </ul>
                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>

            <!-- /. 表格  -->
        </div>
    <!--新建弹窗-->
    <div class="modal fade" id="newProject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">新建元素</h4>
                </div>
                <div class="modal-body">
                    <!--内容-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">元素名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="newName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">所属项目</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="newSel1">
                                    <option value="none">所属项目</option>
                                    {% for project in project_list %}
                                        <option value="{{ project.id }}">{{ project.project_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">所属页面</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="newpage1">
                                    <option value="none">所属页面</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">定位类型</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="newBy">
                                    {% for row in location_list %}
                                    <option value="{{ row.id }}">{{ row.location_type }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">元素文本</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="newLocator">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">备注信息</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="newRemark"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10 js_message text-danger"></div>
                        </div>
                    </form>
                    <!--内容-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeDown()">取消</button>
                    <button type="button" class="btn btn-primary" onclick="NewList()">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!--end 新建弹窗-->
    <!--编辑弹窗-->
    <div class="modal fade" id="edit_element" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">编辑元素</h4>
                </div>
                <div class="modal-body">
                    <!--内容-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="element_name" class="col-sm-2 control-label">元素名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="element_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit_project_name" class="col-sm-2 control-label">所属项目</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="edit_project_name">
                                    <option value="none">所属项目</option>
                                    {% for project in project_list %}
                                        <option value="{{ project.id }}">{{ project.project_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit_page_name" class="col-sm-2 control-label">所属页面</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="edit_page_name">
                                    <option value="none">所属页面</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="location_type" class="col-sm-2 control-label">定位类型</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="location_type">
                                    {% for row in location_list %}
                                    <option value="{{ row.id }}">{{ row.location_type }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="element_value" class="col-sm-2 control-label">元素文本</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="element_value">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="simple_desc" class="col-sm-2 control-label">备注信息</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="simple_desc"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10 js_BJmessage text-danger"></div>
                        </div>
                    </form>
                    <!--内容-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="edit-save">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!--end 编辑弹窗-->
    <!--删除询问弹窗提示-->
    <div class="modal fade" id="deleteObj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">删除元素</h4>
                </div>
                <div class="modal-body">
                    <p>请确认是否删除元素</p>
                    <p id='delMessage' class="js_DELmessage text-danger"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeDown()">取消</button>
                    <button type="button" class="btn btn-primary" id="delButton">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--end 删除询问弹窗提示-->
{% endblock %}



